<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>五彩纸屑</title>

    <style>
        body {
            background: #333;
        }
    </style>
</head>

<body>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="图层_1" x="0px" y="0px" width="180.57976009981" height="175.86233528918152" viewBox="63.399986267089844 53.29999923706055 164.5999755859375 160.3000030517578"
        style="enable-background:new 0 0 283.5 283.5;" xml:space="preserve" class="style-removed" preserveAspectRatio="none" data-parent="shape_2cCoWkiXHq">

        <g>
            <path d="M189.9,80.6c-6.9-16.5-23-27.3-40.8-27.3c-21.3,0-39.3,15.1-43.5,35.8h-0.3c-23.1,0-41.9,19-41.9,42.4   c0,17.9,11.1,33.9,27.8,39.9v-10c-11.2-5.5-18.5-17-18.5-29.9c0-18.3,14.6-33.1,32.6-33.1c1.2,0,2.4,0.1,3.7,0.2l4.6,0.5l0.5-4.6   c1.9-18.2,16.9-31.9,34.9-31.9c14.9,0,28.2,9.6,33.1,23.8l1,2.7l2.9,0.3c18.6,2.3,32.7,18.4,32.7,37.4c0,15.6-9.4,29.5-23.5,35.1   v9.8h0.1l0.7-0.2c19.1-6.3,32-24.3,32-44.7C228,104,211.8,84.7,189.9,80.6z" fill="#FFFFFF"/>
        </g>
        <path d="M163.7,137.4c-11,0-19.9,8.9-19.9,19.9c0,11,8.9,19.9,19.9,19.9c11,0,19.9-8.9,19.9-19.9  C183.6,146.3,174.7,137.4,163.7,137.4z M163.7,169.7c-6.9,0-12.5-5.6-12.5-12.5c0-6.9,5.6-12.5,12.5-12.5c6.9,0,12.5,5.6,12.5,12.5  C176.2,164,170.6,169.7,163.7,169.7z" fill="#FFFFFF"/>
        <path d="M113.7,115.2c-11,0-19.8,8.9-19.8,19.8c0,11,8.9,19.8,19.8,19.8c11,0,19.8-8.9,19.8-19.8  C133.6,124.1,124.7,115.2,113.7,115.2z M113.7,147.4c-6.9,0-12.5-5.6-12.5-12.5s5.6-12.5,12.5-12.5c6.9,0,12.5,5.6,12.5,12.5  S120.6,147.4,113.7,147.4z" fill="#FFFFFF"/>
        <path d="M151.2,81.6c-9.1,0-16.5,7.4-16.5,16.5s7.4,16.5,16.5,16.5c9.1,0,16.5-7.4,16.5-16.5S160.3,81.6,151.2,81.6z   M151.2,108.4c-5.7,0-10.4-4.7-10.4-10.4c0-5.7,4.7-10.4,10.4-10.4s10.4,4.7,10.4,10.4C161.6,103.7,156.9,108.4,151.2,108.4z" fill="#FFFFFF"/>
        <path d="M139,180.6c-9.1,0-16.5,7.4-16.5,16.5c0,9.1,7.4,16.5,16.5,16.5c9.1,0,16.5-7.4,16.5-16.5  C155.5,187.9,148.1,180.6,139,180.6z M139,207.3c-5.7,0-10.4-4.7-10.4-10.4s4.7-10.4,10.4-10.4s10.4,4.7,10.4,10.4  S144.7,207.3,139,207.3z" fill="#FFFFFF"/>
        <rect x="122.8" y="146.1" transform="matrix(0.9856 0.1693 -0.1693 0.9856 27.2203 -21.1024)" width="29.2" height="6" fill="#FFFFFF"/>
        <rect x="117.7" y="110.3" transform="matrix(0.8135 -0.5815 0.5815 0.8135 -41.7875 96.3337)" width="23.2" height="6" fill="#FFFFFF"/>
        <rect x="144.7" y="178.3" transform="matrix(-0.5948 0.8038 -0.8038 -0.5948 390.9048 165.6619)" width="18" height="6" fill="#FFFFFF"/>
        </svg>

    <script>
        "use strict";

        var _createClass = function() {
            function defineProperties(target, props) {
                for (var i = 0; i < props.length; i++) {
                    var descriptor = props[i];
                    descriptor.enumerable = descriptor.enumerable || false;
                    descriptor.configurable = true;
                    if ("value" in descriptor) descriptor.writable = true;
                    Object.defineProperty(target, descriptor.key, descriptor);
                }
            }
            return function(Constructor, protoProps, staticProps) {
                if (protoProps) defineProperties(Constructor.prototype, protoProps);
                if (staticProps) defineProperties(Constructor, staticProps);
                return Constructor;
            };
        }();

        function _classCallCheck(instance, Constructor) {
            if (!(instance instanceof Constructor)) {
                throw new TypeError("Cannot call a class as a function");
            }
        }

        var Progress = function() {
            function Progress() {
                var param = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];

                _classCallCheck(this, Progress);

                this.timestamp = null;
                this.duration = param.duration || Progress.CONST.DURATION;
                this.progress = 0;
                this.delta = 0;
                this.progress = 0;
                this.isLoop = !!param.isLoop;

                this.reset();
            }

            Progress.prototype.reset = function reset() {
                this.timestamp = null;
            };

            Progress.prototype.start = function start(now) {
                this.timestamp = now;
            };

            Progress.prototype.tick = function tick(now) {
                if (this.timestamp) {
                    this.delta = now - this.timestamp;
                    this.progress = Math.min(this.delta / this.duration, 1);
                    if (this.progress >= 1 && this.isLoop) {
                        this.start(now);
                    }

                    return this.progress;
                } else {
                    return 0;
                }
            };

            _createClass(Progress, null, [{
                key: "CONST",
                get: function get() {
                    return {
                        DURATION: 1000
                    };
                }
            }]);
            return Progress;
        }();
        var Confetti = function() {
            function Confetti(param) {
                _classCallCheck(this, Confetti);
                this.parent = param.elm || document.body;
                this.canvas = document.createElement("canvas");
                this.ctx = this.canvas.getContext("2d");
                this.width = param.width || this.parent.offsetWidth;
                this.height = param.height || this.parent.offsetHeight;
                this.length = param.length || Confetti.CONST.PAPER_LENGTH;
                this.yRange = param.yRange || this.height * 2;
                this.progress = new Progress({
                    duration: param.duration,
                    isLoop: true
                });
                this.rotationRange = typeof param.rotationLength === "number" ? param.rotationRange : 10;
                this.speedRange = typeof param.speedRange === "number" ? param.speedRange : 10;
                this.sprites = [];

                this.canvas.style.cssText = ["display: block", "position: absolute", "top: 0", "left: 0", "pointer-events: none"].join(";");
                this.render = this.render.bind(this);
                this.build();

                this.parent.append(this.canvas);
                this.progress.start(performance.now());

                requestAnimationFrame(this.render);
            }

            Confetti.prototype.build = function build() {
                for (var i = 0; i < this.length; ++i) {
                    var canvas = document.createElement("canvas"),
                        ctx = canvas.getContext("2d");

                    canvas.width = Confetti.CONST.SPRITE_WIDTH;
                    canvas.height = Confetti.CONST.SPRITE_HEIGHT;

                    canvas.position = {
                        initX: Math.random() * this.width,
                        initY: -canvas.height - Math.random() * this.yRange
                    };

                    canvas.rotation = this.rotationRange / 2 - Math.random() * this.rotationRange;
                    canvas.speed = this.speedRange / 2 + Math.random() * (this.speedRange / 2);

                    ctx.save();
                    ctx.fillStyle = Confetti.CONST.COLORS[Math.random() * Confetti.CONST.COLORS.length | 0];
                    ctx.fillRect(0, 0, canvas.width, canvas.height);
                    ctx.restore();

                    this.sprites.push(canvas);
                }
            };

            Confetti.prototype.render = function render(now) {
                var progress = this.progress.tick(now);

                this.canvas.width = this.width;
                this.canvas.height = this.height;

                for (var i = 0; i < this.length; ++i) {
                    this.ctx.save();
                    this.ctx.translate(this.sprites[i].position.initX + this.sprites[i].rotation * Confetti.CONST.ROTATION_RATE * progress, this.sprites[i].position.initY + progress * (this.height + this.yRange));
                    this.ctx.rotate(this.sprites[i].rotation);
                    this.ctx.drawImage(this.sprites[i], -Confetti.CONST.SPRITE_WIDTH * Math.abs(Math.sin(progress * Math.PI * 2 * this.sprites[i].speed)) / 2, -Confetti.CONST.SPRITE_HEIGHT / 2, Confetti.CONST.SPRITE_WIDTH * Math.abs(Math.sin(progress * Math.PI * 2 * this.sprites[i].speed)), Confetti.CONST.SPRITE_HEIGHT);
                    this.ctx.restore();
                }

                requestAnimationFrame(this.render);
            };

            _createClass(Confetti, null, [{
                key: "CONST",
                get: function get() {
                    return {
                        SPRITE_WIDTH: 9,
                        SPRITE_HEIGHT: 16,
                        PAPER_LENGTH: 100,
                        DURATION: 8000,
                        ROTATION_RATE: 50,
                        COLORS: ["#EF5350", "#EC407A", "#AB47BC", "#7E57C2", "#5C6BC0", "#42A5F5", "#29B6F6", "#26C6DA", "#26A69A", "#66BB6A", "#9CCC65", "#D4E157", "#FFEE58", "#FFCA28", "#FFA726", "#FF7043", "#8D6E63", "#BDBDBD", "#78909C"]
                    };
                }
            }]);

            return Confetti;
        }();

        // (function() {
        //     var DURATION = 8000,
        //         LENGTH = 120;

        //     new Confetti({
        //         width: window.innerWidth,
        //         height: window.innerHeight,
        //         length: LENGTH,
        //         duration: DURATION
        //     });

        //     setTimeout(function() {
        //         new Confetti({
        //             width: window.innerWidth,
        //             height: window.innerHeight,
        //             length: LENGTH,
        //             duration: DURATION
        //         });
        //     }, DURATION / 2);
        // })();
    </script>
</body>

</html>